<template>
  <div class="TemplateAdd">
    <a-row style="margin-left:1%" :gutter="0">
      <a-col :span="8">
        <p style="color: red">备注：模板中的商品修改后，将会在下次上货时生效</p>
      </a-col>
    </a-row>
    <a-form :form="form">
      <a-row :gutter="0">
        <a-col :span="8">
          <a-form-item label="模板名称" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
            <a-input
              placeholder="请输入商品模板名称"
              v-decorator="[
          'templateName',
          {rules: [{ required: true, message: '请输入模板名称!' }]}
        ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-card>
      <div class="title">
        <p>
          <span>占用列</span>
          <span>可摆放数量</span>
        </p>
        <p>
          <span>占用列</span>
          <span>可摆放数量</span>
        </p>
      </div>
      <a-transfer
        :dataSource="mockData"
        :listStyle="{
      width: '43%',
      height: '400px',
    }"
        showSearch
        :titles="['源列表', '目标列表']"
        :operations="['移入', '移出']"
        :targetKeys="targetKeys"
        @change="handleChange"
        :render="renderItem"
        :disabled="disabled"
        @selectChange="selectChange"
        @filterOption="filterOption"
      ></a-transfer>
    </a-card>
    <a-row :gutter="30">
      <a-col :span="22" style="text-align:right;margin-top:2%">
        <router-link to="/home/goodsadmin/templateadmin">
          <a-button>取消</a-button>
        </router-link>
        <a-button type="primary" style="margin-left:1%" @click="addGoodsTemplate()">提交保存</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "TemplateAdd",
  data() {
    return {
      form: this.$form.createForm(this),
      mockData: [],
      targetKeys: [],
      disabled: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < this.mockData.length; i++) {
        const data = {
          key: `${
            this.mockData[i].goodsId == null ? "" : this.mockData[i].goodsId
          }`,
          title: this.mockData[i].agencyName,
          occupancyColumn: this.mockData[i].occupancyColumn,
          placementNumber: this.mockData[i].placementNumber
          // chosen: Math.random() * 2 > 1
        };
        // if (data.chosen) {
        // targetKeys.push(data.key);
        // }
        mockData.push(data);
      }
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    renderItem(item) {
      const customLabel = (
        <span class="custom-item">
          {item.title}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
          {item.occupancyColumn}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {item.placementNumber}
        </span>
      );
      return {
        label: customLabel, // 显示项
        value: item.title // 用于标题和筛选器匹配
      };
    },
    filterOption(inputValue, option) {
      console.log(inputValue, option);
    },
    handleChange(targetKeys, direction, moveKeys) {
      // console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys;
    },
    selectChange(sourceSelectedKeys, targetSelectedKeys) {
      // console.log(sourceSelectedKeys, targetSelectedKeys);
    },
    handleDisable(disabled) {
      this.disabled = disabled;
      console.log(disabled);
    },

    // // 点击从左到右 添加数据
    // onClickRow(record) {
    //   return {
    //     on: {
    //       click: () => {
    //         console.log(record);
    //         if (record.id == orgUser.id) {
    //           this.$message.error("用户已选！");
    //         } else {
    //           orgUser = record;
    //           this.dataOpeate.unshift(record);
    //           //把选中的数据从左边表单移除
    //           var index = this.data.indexOf(record);
    //           if (index > -1) {
    //             this.data.splice(index, 1);
    //           }
    //         }
    //       }
    //     }
    //   };
    // },

    // 新增商品模板初始化
    addGoodsTemplateInit() {
      this.axios
        .post(this.baseUrl + "/goodsTemplate/addGoodsTemplateInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          this.mockData = response.data.data.agentGoodsList;
          this.getMock();
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 新增商品模板
    addGoodsTemplate() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/goodsTemplate/addGoodsTemplate", {
          loginToken: this.$store.state.loginToken,
          goodsIdList: this.targetKeys,
          templateName: values.templateName
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$router.push({
              path: "/home/goodsadmin/templateadmin"
            });
            this.$message.info("新增成功");
          }
          if (response.data.code == -1) {
            this.$error({
              title: "商品互斥",
              content: `您模板中有外包装相似的商品，会造成系统将相似商品弄混淆，造成扣费错误，您可以在相似商品组中选择一个放置在模板中
              ${response.data.msg}`
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.addGoodsTemplateInit();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.TemplateAdd {
  width: 100%;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title p:nth-of-type(1) {
  margin-left: 10%;
  width: 50%;
}
.title p:nth-of-type(2) {
  padding-left: 5%;
  width: 50%;
}
.title p:nth-of-type(2) span {
  margin: 0 10px;
}
</style>
